<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-select v-model="query.classifyGrade"  placeholder="请选择" class="handle-select mr10" clearable>
                    <el-option v-for="(item, index) in classifyGradeOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                </el-select>
                <el-button type="primary" icon="el-icon-search" @click="func_handleSearch" plain>搜索</el-button>
                <el-button type="danger" icon="el-icon-lx-add" @click="func_handleBundDialog(0)" plain>添加</el-button>
            </div>
            <el-table :data="classifyTableData" row-key="id" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column prop="id" label="ID" width="55" align="center" v-if="false" />
				<el-table-column label="序号" width="80" align="center"><template #default="scope">
						{{scope.$index + 1}}
				</template></el-table-column>
                <el-table-column prop="strClassifyColumn" label="类目类型" align="center"></el-table-column>
                <el-table-column prop="classifyName" label="分类名字">
                    <template #default="scope">
                        <el-button type="text" @click="func_handleEdit(scope.$index, scope.row)" >{{scope.row.classifyName}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="classifyGrade" label="类目等级">
                    <template #default=scope>
                        {{scope.row.classifyGrade===0?"一级":scope.row.classifyGrade===1?"二级":"三级"}}
                    </template>
                </el-table-column>
                <el-table-column prop="isExist" label="包含子类目" width="100px" align="center">
                    <template #default=scope>
                        {{scope.row.isExist===0?"否":"是"}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" :width="optColumnWidth" align="center" >
                    <template #default="scope">
                        <el-button type="text" icon="el-icon-delete" class="red mr10" @click="func_handleDelete(scope.$index, scope.row)"> 删除</el-button>
                        <el-dropdown :hide-on-click="false">
                            <span class="el-dropdown-link green mr10"><el-icon class="el-icon-lx-info mr10" />更多</span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <!-- <el-button type="text" icon="el-icon-lx-add" @click="func_handleBundDialog(scope.row.id)"> 绑定下级类目</el-button> -->
                                    <el-dropdown-item @click="func_handleBundDialog(scope.row.id)" v-if="scope.row.classifyGrade<2"> <el-icon class="el-icon-lx-add" /> 绑定下级类目 </el-dropdown-item>
                                    <el-dropdown-item @click="func_gotoPage(scope.row.id)" v-if="scope.row.classifyGrade == 2" class="green mr10"> <el-icon class="el-icon-lx-edit" /> 配置属性 </el-dropdown-item>
                                    <!-- <el-button type="danger" icon="el-icon-lx-add" @click="func_gotoPage(3)">配置类目属性</el-button> -->
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="dataTotal" @current-change="func_handlePageChange"></el-pagination>
            </div>
        </div>
        <!-- 详情数据抽屉框 -->
        <el-drawer v-model="drawerEditVisible" title="分类详情" :with-header="true" size="55%">
            <template #title>
                <h4>分类详情</h4>
            </template>
            <template #default>
                <el-form :label-width="formLabelWidth"  :model="classifyDrawerForm"  :rules="classifyDrawerFormRefRules"  ref="classifyDrawerFormRef" >
                    <el-form-item label="ID">
                        <el-input v-model="classifyDrawerForm.id" class="handle-input mr10" :readonly=true></el-input>
                    </el-form-item>
                    <el-form-item label="商品类目类型" prop="classifyColumn" v-if="classifyDrawerForm.classifyGrade==0">
                        <el-input v-model="classifyDrawerForm.strClassifyColumn" placeholder="商品类目类型" class="handle-input mr10" readonly clearable @click="vDictDialogVisible=true"/>
                    </el-form-item>
                    <el-form-item label="分类名称" prop="classifyName">
                        <el-input v-model="classifyDrawerForm.classifyName" class="handle-input mr10"/>
                    </el-form-item>
                    <el-form-item label="分类等级" prop="classifyGrade">
                        <el-select v-model="classifyGradeOptVal" clearable placeholder="请选择" class="handle-select mr10" @change="func_showParentId">
                            <el-option v-for="(item, index) in classifyGradeOptions" :key="item.value" :label="item.label" :value="item.value" ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="父选项" prop="parentId" v-if="drawerParentIdVisible">
                        <el-input v-model="classifyDrawerForm.parentId" class="handle-input mr10" v-if="false"/>
                        <el-cascader :options="parentClassifyOptions" :props="parentClassifyOptProps" clearable v-model="parentClassifyOptVal"/>
                    </el-form-item>
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="classifyDrawerForm.remark" class="handle-input mr10" ></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="danger" icon="el-icon-delete" @click="func_drawerDelete" plain>删除</el-button>
                        <el-button type="success" icon="el-icon-lx-edit" @click="func_drawerSave" plain>保存</el-button>
                    </el-form-item>
                    <div class="handle-box" v-if="classifyDrawerForm.classifyGrade<2">
                        <VSubTableData v-bind:selectValue="classifyDrawerForm" @subClassifyList="func_loadvSubList"/>
                    </div>
                </el-form>
            </template>
        </el-drawer>
        <!-- 引用字典数据插件 -->
        <el-dialog title="商品类目类型（字典查询）" v-model="vDictDialogVisible" width="55%" :close-on-click-modal="false">
            <div class="handle-box">
                <VDict v-bind:selectValue="63" @dictData="func_loadvDictData" />
            </div>
        </el-dialog>
        <!-- 引用类目数据插件 -->
        <el-dialog title="添加数据类目" v-model="vClassifyDialogVisible" width="55%" :close-on-click-modal="false">
            <div class="handle-box">
                <VClassify v-bind:selectValue="vClassifyData" @classifydata="func_loadvClassifyData"/>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { findClassifyListPage, findClassifyPullDownList, saveClassify, deleteClassify, } from '../../../api/hairmanager/productClassify';
import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../../api/CommonErrorMessage.js";
import VDict from '../components/dict.vue';
import VClassify from './components/classifyForm.vue';
import VSubTableData from './components/classifySubTable.vue';
export default {
    name: "classify",
    components: {VDict, VClassify, VSubTableData},
    setup() {
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref("170px");
        const optColumnWidth = 150;
        // 主表格查询 类目等级选择选项
        const classifyGradeOptions = reactive([
            { label: "一级分类", value: 0,},
            { label: "二级分类", value: 1,},
            { label: "三级分类", value: 2,}]
        );
        // 主表格查询条件
        const query = reactive({
            dicCode: '',
            parentId: 0,
            classifyGrade: 0,
            pageNum: 1,
            pageSize: 10,
        });
        // 主表格数据
        const classifyTableData = ref([]);
        // 主表格数据总数
        const dataTotal = ref(0);
        // =========================================================================================
        const func_gotoPage = (v) => {
            router.push({path: '/productAttribute', query:{id: v }});
        } 
        // 主业务调用方法========================================================================================= START
        /**
         * @name 获取主表格数据
         */
        const func_getData = () => {
            findClassifyListPage(query).then((res)=>{
                classifyTableData.value = res.data.list;
                dataTotal.value = res.data.total;
            });
        };
        func_getData();
        /**
         * @name 条件查询操作
         */
        const func_handleSearch = () => {
            query.pageNum = 1;
            func_getData();
        };
        /**
         * @name 主表格分页查询
         */
        const func_handlePageChange = (val) => {
            query.pageNum = val;
            func_getData();
        };
        /**
         * @name 主表格内删除数据
         */
        const func_handleDelete = (index, row) => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {type: "warning",})
            .then(() => {
                func_del(row['id']);
            }).catch(() => {});
        };
        // 主业务调用方法========================================================================================= END
        /**
         * @name 删除服务员配置
         */
        const func_del = (id) => {
            deleteClassify(id).then((res)=>{
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    ElMessage.success(SUCCESS_DELDATA_DIALOG_MESSAGE);
                    func_getData(); // 刷新数据
                }
            });
        };
        // 详细数据抽屉业务处理========================================================================================= START
        let addFlg = ref(false);
        const drawerEditVisible = ref(false);
        const drawerParentIdVisible = ref(false);
        const classifyGradeOptVal = ref(0);
        const parentClassifyOptVal = ref(0);
        const parentClassifyOptions = ref([]);
        const parentClassifyOptProps = {
            checkStrictly: true,
        };
        const classifyDrawerFormRef = ref(null);
        const classifyDrawerForm = reactive({
            id : 0,
            classifyColumn: "",
            strClassifyColumn: "",
            classifyName: "",
            remark: "",
            classifyGrade: 0,
            parentId: 0,
            load: false,
        });
        /**
         * @name 父分类数据选项读取
         */
        const func_showParentId = () => {
            if(classifyGradeOptVal.value > 0){
                drawerParentIdVisible.value = true;
                classifyDrawerForm.classifyGrade = classifyGradeOptVal;
                func_getClassifyOptions();
            } else {
                classifyDrawerForm.classifyGrade = 0;
                drawerParentIdVisible.value = false;
                classifyGradeOptVal.value = 0;
                parentClassifyOptVal.value = 0;
            }
        }
        /**
         * @name 读取父类选择框数据
         */
        const func_getClassifyOptions = () => {
            findClassifyPullDownList().then((res) => {
                parentClassifyOptions.value = res.data;
            });
        }
        /**
         * @name 主表格内抽屉业务处理
         * @desp 类目数据业务处理
         */
        const func_handleEdit = (index, row) => {
            // 表格内数据初始化到表单里
            Object.keys(classifyDrawerForm).forEach((item) => {
                classifyDrawerForm[item] = row[item];
            });
            if(classifyDrawerForm['classifyGrade'] >= 1) {
                // 展示父类选择框
                drawerParentIdVisible.value = true;
                classifyGradeOptVal.value = classifyDrawerForm['classifyGrade'];
                parentClassifyOptVal.value = classifyDrawerForm['parentId'];
                func_getClassifyOptions();
            } else {
                // 关闭父类选择框
                drawerParentIdVisible.value = false
            }
            drawerEditVisible.value = true;
        };
        /**
         * @name 弹出抽屉删除数据
         */
        const func_drawerDelete = () => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {type: "warning",})
            .then(() => {
                deleteClassify(classifyForm['id']).then((res) => {
                    if(res.code != 200) {
                        if(res.type == 0) {
                            ElMessage.warning(res.message);
                        } else {
                            ElMessage.error(res.message);
                        }
                    } else {
                        ElMessage.success("删除成功");
                        drawerEditVisible.value = false;
                        func_getData();
                    }
                });
            }).catch(() => {});
        };
        /**
         * @name 弹出抽屉保存服务项目配置
         */
        const func_drawerSave = () => {
            addFlg.value = false;
            classifyDrawerFormRef.value.validate((valid) => {
                if (valid) {
                    if(parentClassifyOptVal.value.length ===1){
                        classifyDrawerForm.parentId =parentClassifyOptVal.value[0];
                    } else if(parentClassifyOptVal.value.length ===2){
                        classifyDrawerForm.parentId =parentClassifyOptVal.value[1];
                    } else if(parentClassifyOptVal.value.length ===3){
                        classifyDrawerForm.parentId =parentClassifyOptVal.value[2];
                    }
                    classifyDrawerForm.classifyGrade = classifyGradeOptVal.value;
                    func_saveData();
                } else {
                    return false;
                }
            });
        };
        /**
         * @ name 保存表单数据
         */
        const func_saveData = () => {
            saveClassify(classifyDrawerForm).then((res) => {
                if(res.code != 200) {
                    if(res.type == 0) {
                        ElMessage.warning(res.data.msg);
                    } else {
                        ElMessage.error(res.data.msg);
                    }
                } else {
                    if(addFlg.value === true){
                        ElMessage.success(SUCCESS_ADDDATA_DIALOG_MESSAGE);
                    }else{
                        ElMessage.success(SUCCESS_EDITDATA_DIALOG_MESSAGE);
                    }
                    drawerEditVisible.value = false;
                    func_getData(); // 刷新数据
                    classifyDrawerForm['load'] = true;
                }
            });
        }
        // 表单验证规则
        const classifyDrawerFormRefRules = {
            classifyColumn: [
                { required: true, message: "请选择类目类型", trigger: "blur" },
            ],
            classifyName: [
                { required: true, message: "请输入类目名称", trigger: "blur" },
            ],
        };
        // 详细数据抽屉业务处理========================================================================================= END
        // 引用类目数据插件业务处理========================================================================================= START
        // 类目对话框显示区分
        const vClassifyDialogVisible = ref(false);
        // 类目数据参数
        const vClassifyData = reactive({
            id : 0,
            state : false,
        });
        /**
         * @name 类目数据插件引用对话框
         */
        const func_handleBundDialog = (v) => {
            if(v === 0){
                addFlg.value = true;
                vClassifyData['id'] = 0;
                // 初始化插件内表单数据
                vClassifyData['state'] = true;
            } else {
                vClassifyData['id'] = v;
                // 根据ID，读取数据
                vClassifyData['state'] = false;
            }
            // 显示插件
            vClassifyDialogVisible.value = true;
        };
        const func_loadvClassifyData = (v) => {
            // 判定业务处理成功，关闭对话框,刷新列表，否则保持对话框状态
            if(v['state'] === 1) {
                vClassifyDialogVisible.value = false;
                func_getData();
            } else {
                vClassifyDialogVisible.value = true;
            }
        };
        const func_loadvSubList = (v) => {
            classifyDrawerForm['load'] = false;
        }
        // 引用类目数据插件业务处理========================================================================================= END
        // 引用字典数据插件业务处理========================================================================================= START
        const vDictDialogVisible = ref(false);
        /**
         * @name 字典数据插件引用对话框
         */
        const func_drawerBundDialog = () => {
            vDictDialogVisible.value = true;
        };
        const func_loadvDictData = (v) => {
            classifyDrawerForm.classifyColumn = v.dicCode;
            classifyDrawerForm.strClassifyColumn = v.dicName;
            vDictDialogVisible.value = false;
        };
        // 引用字典数据插件业务处理========================================================================================= END
        return {
            // 系统变量 =========================================================================================
            formLabelWidth, optColumnWidth, query, classifyGradeOptions, classifyTableData, dataTotal,
            // 主表格调用方法 =========================================================================================
            func_handleSearch, func_handlePageChange, func_handleEdit, func_handleDelete, func_gotoPage,
            // 数据执行处理 =========================================================================================
            func_getData, func_del,
            // 类目数据参数变量 =========================================================================================
            vClassifyData, vClassifyDialogVisible, vDictDialogVisible,
            // 详细数据抽屉参数变量 =========================================================================================
            drawerEditVisible, classifyDrawerForm, classifyDrawerFormRef, classifyDrawerFormRefRules, drawerParentIdVisible, classifyGradeOptVal, 
            parentClassifyOptions, parentClassifyOptVal, parentClassifyOptProps, addFlg,            
            // 详细数据抽屉调用方法 =========================================================================================
            func_drawerDelete, func_drawerSave, func_showParentId, func_drawerSave, func_loadvSubList,
            // 引用类目数据插件调用方法 =========================================================================================
            func_handleBundDialog, func_loadvClassifyData,
            // 引用字典数据插件调用方法 =========================================================================================
            func_drawerBundDialog, func_loadvDictData,
        };
    },
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 180px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.green {
    color: #67c23a;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-dropdown-link {
  cursor: pointer;
  /* color: var(--el-color-primary); */
  color: #67c23a;
  display: flex;
  align-items: center;

}
/* .el-popper[x-placement^="bottom"]{
    margin-top:5px;
} */
</style>